<template>
        <div class="card rdsp-card-view" data-page="dectorState">
            <div class="card-content card-content-padding">
                <p class="rdsp-card-title" style="margin-bottom: 20px;">探测器实时状态</p>
                <div class="row no-gap aaa">
                    <a href="/moreDectorState/4/0/0/0/" class="col normal_bot_pdd" data-view=".view-main">
                        <p class="textcolor"></p>
                        <p class="textnumber" style="color: #4de25f" id="normalNum_id"></p>
                    </a>
                    <a href="/moreDectorState/1/0/0/0/" class="col alarm_bot_pdd" data-view=".view-main">
                        <p class="textcolor"></p>
                        <p class="textnumber" style="color: #f24f66" id="alertNum_id"></p>
                    </a>
                    <a href="/moreDectorState/2/0/0/0/" class="col fault_bot_pdd" data-view=".view-main">
                        <p class="textcolor"></p>
                        <p class="textnumber" style="color: #f3b648" id="faultNum_id"></p>
                    </a>
                    <a href="/moreDectorState/3/0/0/0/" class="col shield_bot_pdd" data-view=".view-main">
                        <p class="textcolor"></p>
                        <p class="textnumber" style="color: #8d8d8d" id="shelNum_id"></p>
                    </a>
                </div>
                <div class="row no-gap">
                    <div class="col bottext">正常</div>
                    <div class="col bottext">报警</div>
                    <div class="col bottext">故障</div>
                    <div class="col bottext">屏蔽</div>
                </div>
            </div>
        </div>
</template>
<style scoped>
    .aaa a {
        width: 65px;
        height: 65px;
        position: relative;
        text-align: center;
    }

    .aaa p {
        padding: 0px;
        margin: 0px;
    }

    .textnumber {
        text-align: center;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
    }

    .bottext {
        text-align: center;
    }

    .normal_bot_pdd {
        display: block;
        background-repeat: no-repeat;

        background-position: center;
    }

    .alarm_bot_pdd {
        display: block;
        background-repeat: no-repeat;

        background-position: center;
    }

    .fault_bot_pdd {
        display: block;
        background-repeat: no-repeat;

        background-position: center;
    }

    .shield_bot_pdd {
        display: block;
        background-repeat: no-repeat;

        background-position: center;
    }
</style>
<script>
    return {
        methods: {
            showDecterStateNum:function(){
                var id_org="";
                if (single_Orgid == "") {
                    id_org=userInfor.organizationIds;
                } else {
                    id_org=single_Orgid;
                }
                Dao.dectorState({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgId: id_org,
                }, function (data) {
                    $("#normalNum_id").empty();
                    $("#alertNum_id").empty();
                    $("#faultNum_id").empty();
                    $("#shelNum_id").empty();

                    $("#normalNum_id").append(
                        common.transNullundefined(data.normalCount.toString())
                    )
                    $("#alertNum_id").append(
                        common.transNullundefined(data.fireAlarmCount.toString())
                    )
                    $("#faultNum_id").append(
                        common.transNullundefined(data.faultAlarmCount.toString())
                    )
                    $("#shelNum_id").append(
                        common.transNullundefined(data.shieldAlarmCount.toString())
                    )
                }, true)
            }
        },
        on: {
            pageAfterIn: function(e, page) {
                var self = this;
                self.showDecterStateNum();
            }
        }
    }
</script>
